<template>
    <div class="module-game-bar-com">
        <div class="lbyx-icon">
            <img :src="data.appIcon" alt="">
        </div>
        <div class="lbyx-content">
            <div class="lbyx-title">{{data.appName || '游戏名称'}}</div>
            <div class="lbyx-desc" v-if="showTitle">{{data.appTitle || '游戏副标题'}}</div>
            <div class="lbyx-type" v-else-if="showCategory">
                <ul>
                    <li v-for="(item, index) in typeList" :key="index">{{item}}</li>
                </ul>
            </div>
            <div v-else class="left-score">
                <div class="left-score-icon"></div>
                <div>{{data.appScore || 9.9 | scoreInit}}</div>
            </div>
        </div>
        <div v-if="showButton" class="game-btn">安装</div>
        <div class="lbyx-score" v-else>
            <div class="num">
                <span class="score-icon"></span>
                <span class="score-num">{{data.appScore || 9.9 | scoreInit}}</span>
            </div>
            <div class="lbyx-pingfen">趣游评分</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'moduleGameBar',
    props: ['data', 'showTitle', 'showCategory', 'showButton'],
    data () {
        return {
            // typeList: ['益智游戏']
        }
    },

    filters: {
        scoreInit (val) {
            if (val >= 10) {
                return 10
            } else if (val) {
                return val.toFixed(1)
            }
            return '0.0'
        }
    },
    computed: {
        typeList () {
            let arr
            try {
                arr = this.data.appCategoryName.split(',')
            } catch (error) {
                arr = ['游戏类型']
            }
            return arr
        }
    }
}
</script>

<style lang="scss">
    .module-game-bar-com {
        margin-top: 12px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        .lbyx-icon {
            width: 48px;
            height: 48px;
            border-radius:11px;
            margin-right: 12px;
            overflow: hidden;
            background-color:rgb(246, 197, 68);
            > img {
                width: 100%;
                height: 100%;
            }
        }
        .lbyx-content {
            flex: 1;
            overflow: hidden;
            padding: 4px 0;
            margin-right: 12px;
            .lbyx-title {
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                font-size:16px;
                font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                font-weight:500;
                color:rgba(28,32,44,1);
            }
            .lbyx-desc {
                max-width: 200px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                font-size:14px;
                font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                font-weight:400;
                color:rgba(100, 104, 110,1);
            }
            .lbyx-type {
                width: 100%;
                // height: 200px;
                overflow: scroll;
                > ul {
                    display: flex;
                    > li {
                        margin-right: 6px;
                        box-sizing: content-box;
                        flex-shrink: 0; /* 关键 */
                        list-style: none;
                        padding: 1px 8px;
                        background-color: rgb(233, 251, 238);
                        display: flex;
                        font-size:10px;
                        font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                        font-weight:400;
                        color:rgba(0,191,60,1);
                    }
                }
            }
            .left-score {
                display: flex;
                align-items: center;
                font-size:16px;
                font-family:Roboto-BoldItalic,Roboto;
                font-weight:normal;
                color:rgba(0,191,60,1);
                .left-score-icon {
                    width: 12px;
                    height: 12px;
                    background-image: url('./img/score-icon.png');
                    background-size: 100% 100%;
                    margin-right: 4px;
                }
            }
        }
        .lbyx-score {
            width:67px;
            height:48px;
            background:linear-gradient(180deg,rgba(0,225,111,.1) 0%,rgba(0,191,60,.1) 100%);
            border-radius:4px;
            padding-top: 5px;
            .num {
                height: 24px;
                display: flex;
                align-items: center;
                padding-left: 10px;
                .score-icon {
                    width: 14px;
                    height: 14px;
                    background-image: url('./img/score-icon.png');
                    background-size: 100% 100%;
                    margin-right: 5px;
                }
                .score-num {
                    font-size:20px;
                    font-family:Roboto-BoldItalic,Roboto;
                    font-weight:normal;
                    color:rgba(0,191,60,1);
                }
            }
            > .lbyx-pingfen {
                text-align: center;
                font-size:10px;
                font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                font-weight:400;
                color:rgba(0,191,60,1);
            }
        }
        .game-btn {
            width: 64px;
            height: 24px;
            border-radius:4px;
            border:1px solid rgba(0,191,60,1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:14px;
            font-family:SourceHanSansCN-Regular,SourceHanSansCN;
            font-weight:400;
            color:rgba(0,191,60,1);
        }
    }
</style>
